<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%@ page import="studystat.*" %>
<%@ page import="java.util.List" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Registreren</title>
	<%
		UserService userService = UserServiceFactory.getUserService();
		User user = userService.getCurrentUser();
	%>
	<link rel="stylesheet" href="customThemeJ/themes/StudyStatTheme1.min.css" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile.structure-1.0rc2.min.css" />	
	<script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
	<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
	<%if (user != null) { %>
	<script type="text/javascript">
		function getVakken() 
		{
			<%
				List<Vak> vakkenlijst = VakManager.getInstance().getVakken();
			%>

			var str = "<legend>Welke vakken volgt u?<\/legend>";
			<%
				String name;
				for (Vak vak : vakkenlijst)
				{ 
					name = vak.getNaam(); %>
					str +="<input type=\"checkbox\" name=\"vak\" id=\"" + "<%= name %>" + "\" value=\"" + "<%= name %>" + "\" \/ >" 
							+ "<label for=\"" + "<%= name %>" + "\">"+ "<%= name %>" + "<\/label>";
					<%
				}
			%>
			document.getElementById("vakkencheckfield").innerHTML = str;
		}
		
		function validateRegister()
		{
			var valid = true;
			var first = document.forms["registerform"]["firstname"].value;
			var last = document.forms["registerform"]["surname"].value;
			var alertText = "Er waren fouten in het formulier:\n";
			if(first==null || first==""){
				valid = false;
				alertText += "  - Vul uw voornaam in!\n";
			}
			if(last==null){
				valid = false;
				alertText += "  - Vul uw achternaam in!\n";
			}
			else if(last==""){
				valid = false;
				alertText += "  - Vul uw achternaam in!\n";
			}
			var elLength = document.registerform.elements.length;
			var i;
			var bool = false;
			if(jQuery('#registerform input[type=checkbox]:checked').length){
				bool = true;
			}		
			if(!bool){
				valid = false;
				alertText += "  - Kies minstens 1 vak!\n";
			}
				
			if(!valid){
				alert(alertText);
			}
			return valid;
		}
		
		function checkVakken() {
			<%
				List<Vak> vakkenstudent = StudentManager.getInstance().getStudent(user.getUserId()).getVakken();
			String name2;
				for(Vak vak : vakkenstudent) {
					name2 = vak.getNaam(); %>
					$("input[value='<%=name2%>']").prop("checked", true);
			<%
				}
			%>
			
		}
	<%}%>
	</script>
</head>
<body>
<div data-role="page" data-theme="b">

	<!-- Titelbalk -->
	<div data-role="header" data-position="inline" data-theme="b">
	<a href="achievement.jsp" data-icon="star" class="ui-btn-left" rel="external">Achievements</a>
	<h1>The Real Study Stat</h1>
	<a href="" data-icon="gear" class="ui-btn-right" rel="external">Options</a>
	<div data-role="navbar">
		<ul>
			<li><a href="main.jsp" rel="external">Home</a></li>
			<li><a href="statistieken.jsp" rel="external">Statistieken</a></li>
			<li><a href="contact.html" rel="external">Contact</a></li>
			<li><a href="about.html" rel="external">Over Ons</a></li>
			<li><a href="<%= userService.createLogoutURL("/login") %>" rel="external">Uitloggen</a></li>
		</ul>
	</div>
	</div>
	
	<!-- Inhoud pagina -->
	<div data-role="content" id="content">

		<%
    		if (user != null) {
		%>	
		<div class="ui-grid-b">
		<div class="ui-block-a" style="width: 10%"></div>
	
		<div class="ui-block-b" style="width:80%">	
			<form name="registerform" id="registerform" action="/option" method="post" onSubmit="return validateRegister()" data-ajax="false">
				<div> 
					<label for="firstname">Voornaam:</label> 
					<input type="text" name="firstname" value="<%= StudentManager.getInstance().getStudent(user.getUserId()).getVoornaam() %>" class="required"/>
				</div>
				<br/>
				<div> 
					<label for="surname">Achternaam:</label> 
					<input type="text" name="surname" value="<%= StudentManager.getInstance().getStudent(user.getUserId()).getAchternaam() %>" class="required"/>
				</div>
				<br/>
				<div id="vakkencheck" data-role="fieldcontain">
					<fieldset data-role="controlgroup" id="vakkencheckfield">
					</fieldset>
				</div>
				<script type="text/javascript"> 
					getVakken();
					checkVakken();
				</script>
				<br/>
				
				<input type="hidden" name="userID" value= "<%= user.getUserId() %>"/>
				<div>
					<input type="submit" value="Submit" />
				</div>
			</form>
		</div>
			
			<div class="ui-block-c" style="width:10%"></div>
		</div><!-- /grid-b -->
		<%
			} else {
		%>
				<p><a href="<%= userService.createLoginURL("/login") %>">Log in om verder te gaan</a></p>
		<%
    		}
		%>
	</div>
	</div>
</body>
</html>